<!-- market -->
<template>
  <div class="market-pannel">
    <div class="market-title">
      <div class="market-title-name">COVID-19 Vaccine fund</div>
      <div class="market-icon">
        <router-link to="/article">
          <i class="iconfont icon-guize"></i>
        </router-link>
      </div>
    </div>
    <div class="down-app" v-if="downApp">
      <span
        ><a :href="appPath" target="_blank"> Download the Android app >> </a>
      </span>
      <span>
        <van-icon name="cross" @click="closeDownapp" />
      </span>
    </div>
    <div class="market-content" v-if="!activitiesList && !list">
      <ul class="market-skeleton" v-for="item in 5" :key="item">
        <li class="skeleton-item">
          <div class="item-left"></div>
          <div class="item-right">
            <h4 class="text-only1"></h4>
            <div class="profit-price">
              <div class="item-profit"></div>
              <div class="item-price"></div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="market-content" v-else>
      <!-- 秒杀商品列表 -->
      <ul
        class="market-list"
        v-for="(actItem, a) in activitiesList"
        :key="'a' + a"
      >
        <li class="market-item">
          <div class="item-left">
            <img :src="actItem.image" alt="" srcset="" />
            <div class="cutdown-time">
              <i class="iconfont icon-daojishi"></i>
              <van-count-down
                :time="actItem.left_seconds * 1000"
                format="HH:mm:ss"
              />
            </div>
          </div>
          <div class="item-right">
            <div class="rightTop">
              <h4 class="text-only1">{{ actItem.name }}</h4>
              <div class="item-profit">
                Profit:
                {{
                  (actItem.act_selling_price - actItem.act_buying_price)
                    | getmoney
                }}
                Rs / {{ actItem.act_day }} Day
              </div>
            </div>
            <div class="profit-price">
              <!-- <div class="progress">
                <div class="progress-left">
                  <Progress
                    :percentage="36"
                    trackColor="#FEDBCB"
                    pivotColor="#FF4F02"
                  />
                </div>
                <div class="progress-right text-only1">
                  1502 people purchased ple purchased
                </div>
              </div> -->
              <div class="item-price">
                <span class="price-num">
                  <i class="icon">₹:</i>
                  {{ actItem.act_buying_price | getmoney }}
                  <i class="oldPrice"
                    >/{{ actItem.buying_price | getmoney }}</i
                  ></span
                >
                <button
                  class="item-buy"
                  @click="buyHandle(actItem, actItem.pet_id)"
                >
                  <i class="iconfont icon-goumai"></i> Invest
                </button>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <!-- 正常商品列表 -->
      <ul class="market-list" v-for="item in list" :key="item.id">
        <li class="market-item">
          <div class="item-left">
            <img :src="item.image" alt="" srcset="" />
          </div>
          <div class="item-right">
            <div class="rightTop">
              <h4>{{ item.name }}</h4>
              <div class="item-profit">
                Profit: {{ item.profit | getmoney }} Rs / {{ item.day }} Day
              </div>
            </div>

            <div class="profit-price">
              <div class="item-price">
                <span class="price-num">
                  <i class="icon">₹:</i> {{ item.buying_price | getmoney }}
                  <!-- <i class="oldPrice">/{{item.buying_price | getmoney}}</i> -->
                </span>
                <button class="item-buy" @click="buyHandle(item, item.id)">
                  <i class="iconfont icon-goumai"></i> Invest
                </button>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!--购买份数-->
    <van-overlay :show="buyShow" @click="buyShow = false" z-index="20">
      <div class="dialog-buy" @click.stop>
        <div class="buy-card">
          <div class="card-icon">
            <van-icon name="cross" @click="buyShow = false" />
          </div>
          <h3 class="card-title">Servings</h3>
          <p class="card-desc">Please confirm the Servings</p>
          <div class="card-content">
            <!-- <input type="number" v-model="buyNum" /> -->
            <div class="content-icon">
              <i
                class="iconfont"
                :class="buyNum === '1' ? 'icon-a---' : 'icon-a--'"
                @click="jianHandle"
              ></i>
            </div>
            <div>
              <van-field v-model="buyNum" type="digit" maxlength="2" />
            </div>
            <div class="content-icon">
              <i
                class="iconfont"
                :class="buyNum !== '99' ? 'icon-a-' : 'icon-a-1'"
                @click="addHandle"
              ></i>
            </div>
          </div>
          <button @click="confirmBuy">
            <i class="iconfont icon-goumai"></i> Invest
          </button>
        </div>
      </div>
    </van-overlay>
    <!-- 购买成功 -->
    <van-overlay
      :show="buySuccessShow"
      @click="buySuccessShow = false"
      z-index="20"
    >
      <div class="dialog-success" @click.stop>
        <div class="success-card">
          <div class="card-icon">
            <van-icon name="cross" @click="buySuccessShow = false" />
          </div>
          <div class="success-success">
            <van-icon name="checked" color="#28C953" size="40" />
          </div>
          <h3 class="card-title">Success</h3>
          <p class="card-desc">Congratulations on your purchase</p>
          <button @click="buySuccessShow = false">Yes</button>
        </div>
      </div>
    </van-overlay>
    <!-- 通知 -->
    <van-overlay :show="noticeShow" @click="noticeShow = false" z-index="20">
      <div class="dialog-notice" @click.stop v-if="noticeTop">
        <div class="notice-bg">
          <div class="notice-card">
            <div class="card-icon">
              <van-icon name="cross" @click="noticeShow = false" />
            </div>
            <h3 class="card-title">{{ noticeTop.title || "Notice" }}</h3>
            <div class="card-notice-desc" v-html="noticeTop.content"></div>
            <button @click="noticeClose">Close</button>
          </div>
        </div>
      </div>
    </van-overlay>
    <!-- 提示 -->
    <van-overlay :show="tipsShow" @click="tipsShow = false" z-index="20">
      <div class="dialog-notice" @click.stop>
        <div class="notice-card">
          <div class="card-icon">
            <van-icon name="cross" @click="tipsShow = false" />
          </div>
          <h3 class="card-title">Tips</h3>
          <p class="card-desc">
            {{ tipsText }}
            <!-- Currently buying is:xxxxx After 3 days you will get：240rs Do you
            confirm the purchase? -->
          </p>
          <button class="cancel">No</button
          ><button class="confirm" @click="tipsShow = false">Yes</button>
        </div>
      </div>
    </van-overlay>
    <!-- 购买失败 -->
    <van-overlay :show="buyFailShow" @click="buyFailShow = false" z-index="20">
      <div class="dialog-success" @click.stop>
        <div class="success-card">
          <div class="card-icon">
            <van-icon name="cross" @click="buyFailShow = false" />
          </div>
          <div class="success-success">
            <van-icon name="warning" color="#FF5300" size="40" />
          </div>
          <h3 class="card-title">Purchase failed</h3>
          <p class="card-desc">Your balance is insufficient</p>
          <button class="failcancel" @click="buyFailShow = false">Cancel</button
          ><button class="failconfirm" @click="toRecharge">To recharge</button>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { Toast } from "vant";
import Progress from "@/components/progress/index";
import { setSession, getSession } from "@/utils/common";
export default {
  data() {
    return {
      time: 30 * 60 * 60 * 1000,
      buyShow: false,
      buySuccessShow: false,
      buyFailShow: false,
      noticeShow: false,
      tipsShow: false,
      downApp: true,
      buyNum: 1,
      list: null,
      activitiesList: null,
      currentBuy: {
        id: "",
        name: "",
        day: "",
        profit: "",
        type: "",
        value: "1",
      },
      tipsText: "",
      noticeTop: null,
      appPath: "",
    };
  },
  components: {
    Progress,
  },
  mounted() {
    const closeDownApp = getSession("downApp");
    if (closeDownApp) {
      this.downApp = false;
    }
    const url = window.location.origin;
    if (url.includes("az.fundvaccine.in")) {
      this.downApp = false;
      setSession("downApp", "close");
    }
    this.$store
      .dispatch("getVersions", {
        type: "android",
      })
      .then((res) => {
        this.appPath = res.data.path;
      });
    this.$store.dispatch("petindex").then((res) => {
      this.list = res;
    });
    this.$store.dispatch("top").then((res) => {
      if (res.length !== 0) {
        this.noticeTop = res[0];
        const close = getSession("notice");
        if (!close && res[0].eject) {
          this.noticeShow = res[0].eject;
        }
      }
    });
    this.petActIndex();
  },
  methods: {
    petActIndex() {
      this.$store.dispatch("petActIndex").then((res) => {
        this.activitiesList = res;
      });
    },
    buyHandle(item, id) {
      // 点击购买
      this.currentBuy = {
        id,
        name: item.name,
        day: item.day,
        profit: item.profit || item.act_selling_price - item.act_buying_price,
        type: item.type || 1,
      };
      this.buyShow = true;
    },
    jianHandle() {
      const { buyNum } = this;
      if (buyNum !== "1") {
        this.buyNum -= 1;
      }
    },
    addHandle() {
      const { buyNum } = this;
      if (buyNum !== "99") {
        this.buyNum = Number(buyNum) + 1;
      }
    },
    // 确认购买
    confirmBuy() {
      this.buyShow = false;
      this.$store
        .dispatch("buypet", {
          pet_id: this.currentBuy.id,
          type: this.currentBuy.type,
          number: this.buyNum,
        })
        .then((res) => {
          if (res.code == 0) {
            this.buySuccessShow = true;
            this.$store.dispatch("getperons");
          } else if (res.code == 10009) {
            this.buyFailShow = true;
          } else {
            this.$toast(res.msg);
          }
        });
    },
    toRecharge() {
      this.buyFailShow = false;
      this.$router.push("/recharge");
    },
    noticeClose() {
      this.noticeShow = false;
      setSession("notice", "close");
    },
    closeDownapp() {
      this.downApp = false;
      setSession("downApp", "close");
    },
  },
};
</script>

<style lang="scss" scoped>
.market-skeleton {
  li {
    display: flex;
    align-items: center;
    width: 345px;
    height: 120px;
    background: #ffffff;
    box-shadow: 0px 3px 12px rgba(103, 103, 103, 0.2);
    border-radius: 8px;
    padding: 10px;
    margin: 0 0 10px 0;
    box-sizing: border-box;
  }
  .item-left {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    background-color: #f2f3f5;
  }
  .item-right {
    flex: 1;
    margin-left: 10px;
    height: 100%;

    h4 {
      height: 20px;
      width: 70%;
      background-color: #f2f3f5;
    }
    .item-profit {
      height: 20px;
      width: 90%;
      background-color: #f2f3f5;
      margin: 10px 0;
    }
    .item-price {
      height: 20px;
      flex: 1;
      width: 90%;
      background-color: #f2f3f5;
    }
  }
}
.market-pannel {
  height: 100%;
  padding: 0 15px;
  background-color: #fcfcfc;
  box-sizing: border-box;
  .market-title {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
    left: 0;
    font-size: 17px;
    padding: 20px 0;
    color: #333;
    background-color: #fcfcfc;
    .market-icon {
      position: absolute;
      right: 15px;
      color: #4a67f5;
    }
  }
  .down-app {
    top: 60px;
    left: 0;
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background-color: #f8f8f8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: url("../../assets/imgs/downapp.png") no-repeat;
    background-size: 100% 100%;
    color: #9f6400;
    z-index: 10;
    a {
      color: #9f6400;
    }
  }
  .market-content {
    padding: 100px 0 100px 0;
    .market-item {
      width: 345px;
      height: 120px;
      background: #ffffff;
      box-shadow: 0px 3px 12px rgba(103, 103, 103, 0.2);
      border-radius: 8px;
      margin: 0 0 12px 0;
      display: flex;
      box-sizing: border-box;
      padding: 10px;
      color: #333;
      .item-left {
        position: relative;
        width: 100px;
        height: 100px;
        border-radius: 8px;
        img {
          width: 100px;
          height: 100px;
          border-radius: 8px;
        }

        .cutdown-time {
          position: absolute;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          left: 0;
          bottom: 0;
          text-align: center;
          width: 100px;
          height: 25px;
          line-height: 25px;
          color: #fff;
          background: rgba(255, 79, 2, 0.8);
          border-radius: 0px 0px 8px 8px;
          /deep/ .van-count-down {
            margin: 0 0 0 5px;
            font-size: 12px;
            color: #fff;
          }
          .block {
            font-size: 14px;
          }
        }
      }
      .item-right {
        flex: 1;
        margin-left: 10px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .rightTop {
          flex: 1;
        }
        h4 {
          font-size: 14px;
          font-weight: 500;
        }
        .profit-price {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .progress {
            display: flex;
            align-items: center;
            .progress-left {
              width: 120px;
            }
            .progress-right {
              margin: 0 0 0 10px;
              color: #666666;
              font-size: 11px;
            }
          }
        }
        .item-profit {
          font-size: 15px;
          color: #ff4f02;
          margin: 5px 0 0 0;
        }
        .item-price {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 20px;
          color: #333;
          .price-num {
            .icon {
              font-size: 14px;
            }
            .oldPrice {
              font-size: 12px;
              color: #666666;
            }
          }
          .icon-goumai {
            font-size: 12px;
          }
          button {
            width: 80px;
            height: 30px;
            background: #4a67f5;
            border-radius: 15px;
            border: none;
            font-size: 13px;
            color: #fff;
            box-shadow: 0px 2px 10px rgba(74, 103, 245, 0.4);
          }
        }
      }
    }
  }
}
.card-notice-desc {
  padding: 0 10px;
}
.dialog-notice {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .notice-bg {
    width: 300px;
    min-height: 204px;
    border-radius: 5px;
    background-color: #fff;
    padding: 0 0 10px 0;
  }
  .notice {
    padding: 20px 0 0 0;
  }
  .notice-card {
    width: 300px;
    min-height: 204px;
    border-radius: 5px;
    background-color: #fff;
    background-size: contain;
    position: relative;
    text-align: center;
    background: url("../../assets/imgs/notice_market.png") no-repeat;
    background-size: contain;
    .card-icon {
      position: absolute;
      right: 10px;
      top: 10px;
    }
    h3 {
      font-size: 17px;
      padding: 30px 0 14px 0;
      color: #333;
    }
    p {
      padding: 0 40px;
      color: #666666;
    }
    .cancel {
      margin: 15px 10px 0 0;
      width: 75px;
      height: 40px;
      color: #4a67f5;
      background: #ffffff;
      border: 1px solid #4c6cf1;
    }
    .confirm {
      margin: 15px 0 0 0;
      width: 75px;
      height: 40px;
      background: #4a67f5;
      border-radius: 20px;
      border: none;
      color: #fff;
      box-shadow: 0px 2px 10px rgba(74, 103, 245, 0.4);
    }
    button {
      i {
        font-size: 13px;
      }
      margin: 30px 0 0 0;
      width: 150px;
      height: 40px;
      background: #4a67f5;
      border-radius: 20px;
      border: none;
      color: #fff;
      box-shadow: 0px 2px 10px rgba(74, 103, 245, 0.4);
    }
  }
}
.dialog-success {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .success-success {
    padding: 20px 0 0 0;
  }
  .success-card {
    width: 300px;
    height: 204px;
    border-radius: 5px;
    background-color: #fff;
    background-size: 300px 204px;
    position: relative;
    text-align: center;
    .card-icon {
      position: absolute;
      right: 10px;
      top: 10px;
    }
    h3 {
      font-size: 17px;
      padding: 5px 0 10px 0;
      color: #333;
    }
    p {
      color: #666666;
    }
    .failcancel {
      margin: 15px 10px 0 0;
      width: 100px;
      height: 40px;
      color: #4a67f5;
      background: #ffffff;
      border: 1px solid #4c6cf1;
    }
    .failconfirm {
      margin: 15px 10px 0 0;
      width: 100px;
      height: 40px;
      color: #fff;
      background: #4a67f5;
    }
    button {
      i {
        font-size: 13px;
      }
      margin: 30px 0 0 0;
      width: 150px;
      height: 40px;
      background: #4a67f5;
      border-radius: 20px;
      border: none;
      color: #fff;
      box-shadow: 0px 2px 10px rgba(74, 103, 245, 0.4);
    }
  }
}
.dialog-buy {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .buy-success {
    padding: 20px 0 0 0;
  }
  .iconfont {
    font-size: 35px;
  }
  .icon-a--- {
    color: #adb4c6;
  }
  .icon-a- {
    color: #4a67f5;
  }
  .icon-a-- {
    color: #4a67f5;
  }
  .buy-card {
    width: 300px;
    height: 204px;
    border-radius: 5px;
    background-color: #fff;
    background: url("../../assets/imgs/buy_card.png");
    background-size: 300px 204px;
    position: relative;
    text-align: center;
    .card-icon {
      position: absolute;
      right: 10px;
      top: 10px;
    }
    h3 {
      font-size: 17px;
      padding: 15px 0 10px 0;
      color: #333;
    }
    p {
      color: #666666;
    }
    .card-content {
      margin: 25px 0 0 0;
      display: flex;
      justify-content: center;
      align-items: center;
      .content-icon {
        padding: 0 10px;
      }
      /deep/ .van-cell {
        font-size: 25px;
        color: #12182c;
        text-align: center;
        background: none;
        padding: 0 !important;
        width: 50px;
        input {
          text-align: center;
        }
        border-bottom: 1px solid #adb4c6;
      }
    }
    button {
      i {
        font-size: 13px;
      }
      margin: 30px 0 0 0;
      width: 150px;
      height: 40px;
      background: #4a67f5;
      border-radius: 20px;
      border: none;
      color: #fff;
      box-shadow: 0px 2px 10px rgba(74, 103, 245, 0.4);
    }
  }
}
</style>